<template>
  <el-menu
    :default-active="get_cuur_index()"
    :router="true"
  >
    <template
      v-for="e in perm"
    >
      <template v-if="typeof e === 'string'">
        <el-menu-item
          :key="`perm${e}`"
          :index="e"
          :route="`/user/${permList[e].route}`"
        >
          <i :class="permList[e].icon" />
          <span slot="title">{{ permList[e].name }}</span>
        </el-menu-item>
      </template>
      <el-submenu
        v-else
        :key="`perm${e}`"
        :index="e[0][0]"
      >
        <template slot="title">
          <i :class="permList[e[0][0]].icon" />
          <span>{{ permList[e[0][0]].name }}</span>
        </template>
        <el-menu-item
          v-for="se in e"
          :key="`perm${se}`"
          :index="se"
          :route="`/user/${permList[se].route}`"
        >
          <i
            v-if="permList[se].icon"
            :class="permList[se].icon"
          />
          <span slot="title">{{ permList[se].name }}</span>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: 'UserAside',
  props: {
  },
  data () {
    return {
      perm: this.$store.getters.permitLevel,
      permList: this.$store.state.user_permit.list
    }
  },
  methods: {
    get_cuur_index: function () {
      const name = this.$route.name
      const l = { ...this.permList }
      for (const [i, e] of Object.entries(l)) {
        if (e.route === name) {
          return i
        }
      }
    }
  }
}
</script>
